<template>
    <!-- v-model实现变量与元素的双向绑定，输入框可以传回后台数据 -->
     <!-- v-bind动态给标签属性（style，class）绑定变量，实现样式的动态切换。 -->
    <div class="PageDay0102">
        用户名：<input type="text" v-model="userName" style="border: 1px solid #ccc; padding: 5px; width: 200px;"/>
        <select name="" id="" v-model="nation" class="btn btn-primary" style="margin-left:20px" @click="chooseNation()">
            <option value="中国">中国</option>
            <option value="美国">美国</option>
            <option value="德国">德国</option>
            <option value="日本">日本</option>

        </select>
        <input type="button" value="提交" @click="submit()" class="btn btn-primary" style="margin-left: 20px;">
    </div>
</template>
<script>
export default {
    name: 'PageDay0102',
    data () {
        return {
            userName: '',
            nation: "中国",
        };
    },
    mounted: function () {
        
    },
    methods: {
        submit() {
            console.log('submit....');
            console.log("用户名:",this.userName);
            console.log(this.nation);
        },
        chooseNation() {
            this.userName = this.nation;
        }
    }
};
</script>
<style scoped>
    
</style>